<template>
  <div class="contract-box">
    <!-- 合同管理 -->
    <serchForm
      :Form="clientForm"
      :FormLabel="clientFormLabel"
      @onSearch="onSearch"
    />
    <div
      class="function-box"
      v-if="checkPermi(['system:contracts:edit'])"
    >
      <el-button
        class="createBtn"
        @click="newAdd"
      ><i class="iconfont icon-plus-square"></i>
        新增
      </el-button>
      <el-button
        class="reviseBtn"
        @click="updateInfo"
      ><i class="iconfont icon-xiugai"></i>
        修改
      </el-button>
      <el-button
        class="exportBtn"
        @click="deleteCustomerFn"
      ><i class="iconfont icon-shanchu"></i>
        删除
      </el-button>
    </div>
    <forTableCom
      :color="color"
      :idActive="idActive"
      :bg="bg"
      :total="totals"
      :page="pageNum"
      :limit="pageSize"
      @handleSelectionChange="handleSelectionChange"
      @handleChange="handleChange"
      @viewFiles="viewFiles"
      @downloadFiles="downloadFiles"
      @updatePage="updatePage"
      @updateLimit="updateLimit"
      :tableHeaderData="clientTableHeaderData"
      @tableDetail="tableDetail"
      @handleEdit="handleEdit"
      @handleDelete="handleDelete"
      :tableData="clientTableData"
      :operate="operate"
    />

    <newAddContract
      v-if="flag"
      :disabled="disabled"
      @closePopUps="closePopUps"
      :popTitle="popTitle"
      @getoutboundOrderData="getoutboundOrderData"
      :defindFlag="defindFlag"
      :classifyFlag="contract"
      :updateInfoDetail="updateInfoDetail"
    />
    <!-- <updateContract v-if="updateContractFlag"/> -->
  </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import visitCom from './components/visitCom'
const { proxy } = getCurrentInstance();
import dayjs from 'dayjs'
import newAddContract from './components/newAddContract'
import { listContracts, delContracts } from '@/api/customer'
import FileSave from 'file-saver'
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { dayCha, newDateFn, getDiffDay } from '@/utils/datCha.js'
let updatePop = updatePopHook()
import { checkPermi } from "@/utils/permission.js";

// import updateContract from './components/updateContract'
import { ref } from 'vue';
const idActive = 'contractId'

// 显示修改
let updateContractFlag = ref(true)
// 显示操作栏
const operate = ref(true)
// 显示新增弹窗
let flag = ref(false)
// 显示操作栏
let popTitle = ref('新增')
// 详情控制变量
let defindFlag = ref(true)
// 修改客户flag
let contract = ref(true)
let disabled = ref(false)
// 回显数据
let updateInfoDetail = ref(null)
// 表单绑定属性名
let clientForm = ref(
  {
    contractId: '',    // 合同编号
    contractType: '',    // 合同类别
    customerName: '',    // 客户名称
    contractDate: '',      // 合同年限
  }
)
// 表单数据标题
let clientFormLabel = ref([
  {
    name: 'contractId',
    label: '合同编号'
  },
  {
    name: 'contractType',
    label: '合同类别',
  },
  {
    name: 'customerName',
    label: '客户名称',
  },
  {
    name: 'contractDate',
    label: '合同年限',
    type: 'datetimerange'
  },
])
// 查找
const onSearch = (v) => {
  // 每次查询后回到页1
  pageNum.value = 1
  listContractsFn(v);
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')

let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])

// 表格表头数据
let clientTableHeaderData = ref([
  {
    prop: 'contractId',
    label: '合同编号',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'customerName',
    label: '客户名称',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'customerRank',
    label: '客户等级',
    colorClassName: 'activeColor',
    minwidth: 100
  },
  {
    prop: 'businessType',
    label: '业务类型',
    minwidth: 100
  },
  {
    prop: 'productionContent',
    label: '制作内容',
    minwidth: 100
  },
  {
    prop: 'contactPhone',
    label: '联系电话',
    minwidth: 100
  },
  {
    prop: 'contractAmount',
    label: '合同金额',
    minwidth: 100
  },
  {
    prop: 'contractStartDate',
    label: '起始日期',
    minwidth: 100
  },
  {
    prop: 'contractEndDate',
    label: '结束日期',
    minwidth: 100
  },
  // 合同年限
  {
    prop: 'contractAgeLimit',
    label: '合同年限',
    minwidth: 100
  },
  // 到期时间
  {
    prop: 'expirationTime',
    label: '到期时间',
    minwidth: 100
  },
  {
    prop: 'responsiblePerson',
    label: '负责人'
  },
  {
    prop: 'remindWarn',
    label: '到期提醒',
    minwidth: 100
  },
])
// 表格数据内容
let clientTableData = ref([


])

// 删除客户
const deleteCustomerFn = () => {
  if (multipleSelection.value.length == 1) {
    proxy.$modal.confirm("确认信息", '警告', {
      confirmButtonText: '删除',
      cancelButtonText: '取消',
      type: 'warning',
    }
    ).then(async () => {
      let { msg, code } = await delContracts(multipleSelection.value[0].contractId)
      if (code == 200) {
        proxy.$modal.msgSuccess(msg)
        listContractsFn()
      }
    })
      .catch(() => {
        proxy.$modal.msg('取消成功')
      })
  } else if (multipleSelection.value.length == 0) {
    proxy.$modal.msgWarning("请勾选一条数据");
  } else {
    proxy.$modal.msgWarning("只能一条一条删除，禁止多个删除数据(@&@)");
  }

}


// 选中的列
const handleSelectionChange = (v) => {
  multipleSelection.value = v
  console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
  let { page, limit } = v.page
  pageNum.value = page
  pageSize.value = limit
  listContractsFn(clientForm.value)
}
// 当前页面位置发生变化
const updatePage = (v) => {
  console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
  console.log(v);
}
// 编辑
const handleEdit = (props) => {
  let { i, v } = props
  console.log('编辑', i, v);
}
// 删除
const handleDelete = (props) => {
  let { i, v } = props
  console.log('删除', i, v);
}


// 关闭弹窗
const closePopUps = () => {
  updateInfoDetail.value = null
  flag.value = false
}

// 新增合同
const newAdd = () => {
  flag.value = true
  disabled.value = false
  popTitle.value = '新增'
  defindFlag.value = true

}
// 修改合同
const updateInfo = () => {
  if (multipleSelection.value.length == 1) {
    updateInfoDetail.value = multipleSelection.value[0]
    flag.value = true
    disabled.value = false
    popTitle.value = '修改'
    defindFlag.value = true

  } else {
    proxy.$modal.msgWarning('勾选一个@^@')
  }

}
// 详情双击行
const tableDetail = (props) => {
  updateInfoDetail.value = props
  disabled.value = true
  flag.value = true
  popTitle.value = '详情'
  defindFlag.value = false
}
// 请求数据
const listContractsFn = async (data = '') => {
  let data1 = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }
  let params = Object.assign(data1, data)
  let res = await listContracts(params)
  let { code, total, rows } = res
  if (code == 200) {
    rows.forEach((v, i) => {
      // let { yearsSpaced } = dayCha(v.contractStartDate,v.contractEndDate)
      v.contractAgeLimit = dayjs(v.contractEndDate).diff(v.contractStartDate, 'year')
      let totalDays = getDiffDay(newDateFn(), v.contractEndDate)
      v.expirationTime = totalDays || '暂无'
      if (totalDays <= 0) {
        v.remindWarn = '合同到期'
      }
    })
    clientTableData.value = rows
    totals.value = total
  }
}

const viewFiles = (props) => {
  window.open(props.v.files)
}
const downloadFiles = (props) => {
  if (props.v.files.indexOf('.pdf') != -1) {
    FileSave(props.v.files, "mypdffilename.pdf")
  } else {
    window.open(props.v.files, '_self')
  }
}
const getoutboundOrderData = () => {
  listContractsFn()
}
onMounted(() => {
  listContractsFn()
})
</script>
<style scoped lang='scss'>
.contract-box {
  padding: 16px;

  .function-box {
    display: flex;
    align-items: center;
  }
}
</style>
